<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
	#frame{
		position:absolute;
		width:300px;
		height:200px;
		overflow:hidden;
		border-radius:5px;
		}
    /*#dis{
    	position:absolute;
    	left:-50px;
    	top:-10px;
    	opacity:.5;
    	}*/
    /*#dis li{
    	display:inline-block;
    	width:200px;
    	height:20px;
    	margin:0 50px;
    	float:left;
    	text-align:center;
    	color:#fff;
    	border-radius:10px;
    	background:#000;
    	}*/
    #photos img{
    	float:left;
    	width:300px;
    	height:200px;
    	}
    #photos {  
    	position: absolute;
    	z-index:9; 
    	/*width: calc(300px * 4);*//*---修改图片数量的话需要修改下面的动画参数*/  }
    .play{ 
    	animation: ma 10s ease-out infinite alternate;
    	}
    @keyframes ma {
        0%,25% {        margin-left: 0px;       }
        30%,50% {       margin-left: -300px;    }
       	55%,75% {       margin-left: -600px;    }
        80%,100% {       margin-left: -900px;    }

    }
		</style>
	</head>
	<body>
		<div id="frame" >
    	<div id="photos" class="play">
        <img src="img/indeximgbig.jpg"/>
        <img src="img/collimg.png"/>
        <img src="img/indeximgbig.jpg"/>
        <img src="img/collimg.png"/>
        <!--<ul id="dis">
            <li>111111111111111</li>
            <li>22222222222222</li>
            <li>33333333333333</li>
            <li>44444444444444</li>
        </ul>-->
    	</div>
		</div>
	</body>
</html>
